<template>
    <div id="container" name="container" class="container"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { Web3D } from "./api/three.mamager";
import { Trace } from "./api/trace.manager";
export default {
    components: {},
    data() {
        return {
            scene: null,
            camera: null,
            renderer: null,
            ringMesh: null
        }
    },
    mounted() {
        this.init();
        this.initObj();
        this.initControls();
        this.animate();
    },
    methods: {
        init() {
            this.scene = new THREE.Scene();

            //初始化渲染器
            let container = document.getElementById("container");
            let height = container.offsetHeight;
            let width = container.offsetWidth;


            var my3D = new Web3D();
            this.camera = my3D.createCamera(width, height);


            let hLight = new THREE.AmbientLight(0xffffff, 5);
            this.scene.add(hLight);

            this.renderer = my3D.createWebGLRenderer(width, height);
            this.renderer.setSize(width, height);
            container.appendChild(this.renderer.domElement);


            my3D.loadModel("xf-prod.glb", this.scene);

            this.ringMesh = new Trace().createMark();
            this.scene.add(this.ringMesh);


            window.addEventListener("resize", this.onWindowResize, false);
        },
        onWindowResize() {
            let container = document.getElementById("container");
            let height = container.offsetHeight;
            let width = container.offsetWidth;

            this.camera.aspect = width / height;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(width, height);
        },
        initObj() {
            var geo = new THREE.BoxGeometry(0.5, 0.5, 0.5);
            var mat = new THREE.MeshStandardMaterial({
                color: "#00ab00",
                side: THREE.DoubleSide,
                emissiveIntensity: 10,
            });
            var mark = new THREE.Mesh(geo, mat);
            mark.position.set(0, 2, 0);

            this.scene.add(mark);


        },
        animate() {
            requestAnimationFrame(this.animate);
            this.ringMesh.position.x += 0.1;
            this.renderer.render(this.scene, this.camera);
        },
        initControls() {
            //初始化控制器
            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
            this.controls.minDistance = 10;
            this.controls.maxDistance = 500;
            // // 上下旋转范围
            this.controls.minPolarAngle = 0; // radians
            this.controls.maxPolarAngle = Math.PI * 0.5; // radians
            // // 左右旋转范围
        }
    }
}

</script>
<style lang="less">
.container {
    font-size: 14px;
    height: 100%;
    background: url("/img/t_bg.png") no-repeat center;
    border-radius: 20px;
    background-size: 100% 100%;
    width: 100%;
}
</style>